import React, { Component, ReactNode } from 'react'
import classNames from 'classnames'
import { Icon } from 'antd'

/**
 * 左侧边栏
 */
class UdSidebar extends Component<IUdSidebarProps, IUdSidebarState> {

  constructor(props: IUdSidebarProps) {
    super(props)
    this.state = {
      collapse: false
    }
  }

  public render() {
    return (
      <React.Fragment>
        <div className={classNames('ud-sidebar', { 'collapse': this.state.collapse })}>
          <div className="ud-sidebar-title">{this.props.title}</div>
          <div className="ud-sidebar-body">
            {this.props.children}
          </div>
          {
            this.props.footer &&
            <div className="ud-sidebar-footer">
              {this.props.footer}
            </div>
          }
        </div>
        <div className={classNames('ud-sidebar-collapse', { 'collapse': this.state.collapse })}>
          <div className="ud-sidebar-collapse-bg" onClick={this.collapse}>
            <Icon type={this.state.collapse ? 'menu-unfold' : 'menu-fold'} className="icon" />
          </div>
        </div>
      </React.Fragment>
    )
  }

  protected collapse = () => {
    this.setState({
      collapse: !this.state.collapse
    })
  }

}

interface IUdSidebarProps {
  /**
   * 标题
   */
  title: ReactNode

  /**
   * 主体
   */
  children?: ReactNode

  /**
   * 底部
   */
  footer?: ReactNode
}

interface IUdSidebarState {
  /**
   * 是否收缩
   */
  collapse: boolean
}

export default UdSidebar
